<script setup lang="ts">
import {ref, Ref} from "vue";

interface LogoProps {
  collapse: Boolean,
}

const props = defineProps<LogoProps>();

const logo: Ref<string> = ref("");

const title: Ref<string> = ref("码上慕学");
</script>

<template>
  <div class="sidebar-logo-container" :class="{'collapse': props.collapse}">
    <transition name="sidebar-logo-fade">
      <router-link to="/" v-if="props.collapse" key="collapse" class="sidebar-logo-link">
        <img :src="logo" class="sidebar-logo" alt="sidebar-logo" v-if="logo">
        <h1 v-else class="sidebar-title">{{title}}</h1>
      </router-link>

      <router-link v-else key="expand" class="sidebar-logo-link" to="/">
        <img v-if="logo" :src="logo" class="sidebar-logo" alt="sidebar-logo">
        <h1 class="sidebar-title">{{ title }} </h1>
      </router-link>
    </transition>
  </div>
</template>

<style scoped lang="scss">
.sidebar-logo-fade-enter-active {
  transition: opacity 1.5s;
}

.sidebar-logo-fade-enter,
.sidebar-logo-fade-leave-to {
  opacity: 0;
}

.sidebar-logo-container {
  position: relative;
  width: 100%;
  text-align: center;
  overflow: hidden;

  & .sidebar-logo-link {
    height: 100%;
    width: 100%;

    & .sidebar-logo {
      width: 32px;
      height: 32px;
      vertical-align: middle;
      margin-right: 12px;
    }

    & .sidebar-title {
      display: inline-block;
      margin: 0;
      color: #fff;
      font-weight: 600;
      font-size: 16px;
      font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
      vertical-align: middle;
      word-break: keep-all;
      white-space: nowrap;
      overflow: hidden;
    }
  }

  &.collapse {
    .sidebar-logo {
      margin-right: 0;
    }
  }
}
</style>